<template>
	<view>
		<!--订单编号-->
		<view class="addr">
			<view class="right">
				<view class="tel-name">
					<view class="name">
						订单编号
					</view>
				</view>
				<view class="addres">
					{{orderInfo.number}}
				</view>
			</view>
		</view>
		<!--订单总价-->
		<view class="addr">
			<view class="right">
				<view class="tel-name">
					<view class="name">
						订单总价
					</view>
				</view>
				<view class="addres">
					￥{{orderInfo.total_price}}
				</view>
			</view>
		</view>
		<!--订单状态-->
		<view class="addr">
			<view class="right">
				<view class="tel-name">
					<view class="name">
						订单状态
					</view>
				</view>
				<view class="addres">
					{{orderInfo.order_status_info.name}}
				</view>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="addr">
			<view class="icon">
				<image src="../../static/addricon.png" mode=""></image>
			</view>
			<view class="right">
				<view class="tel-name">
					<view class="name">
						{{orderInfo.harvest_information.receiver_name}}
					</view>
					<view class="tel">
						{{orderInfo.harvest_information.receiver_phone}}
					</view>
				</view>
				<view class="addres">
					{{orderInfo.harvest_information.receiver_address}}
				</view>
			</view>
		</view>
		<!--下单时间-->
		<view class="addr">
			<view class="right">
				<view class="tel-name">
					<view class="name">
						下单时间
					</view>
				</view>
				<view class="addres">
					{{orderInfo.created_at}}
				</view>
			</view>
		</view>
		<!--备注 -->
		<view class="addr" v-if="orderInfo.note">
			<view class="right">
				<view class="tel-name">
					<view class="name">
						备注
					</view>
				</view>
				<view class="addres">
					{{orderInfo.note}}
				</view>
			</view>
		</view>
		<!-- 购买商品列表 -->
		<view class="buy-list" v-for="(row,index) in orderInfo.order_goods" :key="index" @click="navigateTo(row.goods_snapshot.id)">
			<view class="row">
				<view class="goods-info">
					<view class="img">
						<image :src="row.goods_snapshot.cover_info.url"></image>
					</view>
					<view class="info">
						<view class="title">{{row.goods_snapshot.name}}</view>
						<view class="spec">购买数量:{{row.num}}</view>
						<view class="price-number">
							<view class="price">￥{{row.goods_snapshot.price*row.num}}</view>
						</view>
					</view>
				</view>
			</view>
			<!--发货信息-->
			<view class="row" v-if="row.delivery_information">
				<view class="goods-info">
					<view class="info">
						<view class="title">配送方式：{{row.delivery_information.type}}</view>
						<view class="title">配送人/快递公司：{{row.delivery_information.name}}</view>
						<view class="title">联系方式/运单号：{{row.delivery_information.number}}</view>
					</view>
				</view>
			</view>
		</view>
		<!--占位-->
		<view style="height: 110upx;width: 100%;"></view>
		<!--脚注-->
		<view class="footer">
			<view>{{orderInfo.order_status_info.name}}</view>
			<view class="settlement">
				<view class="pay" v-if="orderInfo.status === 0 || orderInfo.status === 1 || orderInfo.status === 4" @click="deleteRquest()">删除</view>
				<view class="default" v-if="orderInfo.status === 1" @click="goRequest(0, '你确定取消订单吗？取消后订单不可其他操作了。')">取消订单</view>
				<view class="pay" v-if="orderInfo.status === 1" @click="goRequest(2, '你确定立即支付吗？')">付款</view>
				<view class="pay" v-if="orderInfo.status === 3" @click="goRequest(4,'你确定立即收货订单吗？确定后订单交易完成。')">确认收货</view>
			</view>
		</view>
		<!--操作-->
		<view>
			<neil-modal
					:show="visibleModal"
					@close="closeModal"
					title="提示"
					:content="modelContent"
					@cancel="goToRequest(false)"
					@confirm="goToRequest(true)">
			</neil-modal>
		</view>
		<view>
			<neil-modal
					:show="visibleModal1"
					@close="closeModal"
					title="提示"
					content="你确定删除吗？删除后无法查看到订单的详情。"
					@cancel="goDeleteRquest(false)"
					@confirm="goDeleteRquest(true)">
			</neil-modal>
		</view>
	</view>
</template>

<script>
    import { order } from '../../common/config'
    import { mapState, mapMutations } from 'vuex'
    import neilModal from '@/components/neil-modal.vue';

	export default {
        components:{neilModal},
        computed:{
        	...mapState(['hasLogin']),
		},
		data() {
			return {
                visibleModal:false,
                visibleModal1:false,
                modelContent:'加载中……',
				requestData:{
                    status: -1,
				},
               orderInfo:{
                   id:0,
                   status:0,
                   number: '加载中……',
                   order_status_info:{
                       name: '加载中……',
				   },
                   harvest_information:{
                       receiver_name:'加载中……',
                       receiver_phone:'加载中……',
                       receiver_address:'加载中……'
				   }
			   },
			};
		},
        onLoad(option){
			this.orderInfo.id = option.id;
            this.loadData();//获取订单的详细信息
		},
		methods: {
            //根据购买商品（商品快照）去到商品详情页
			navigateTo(goods_id){
                uni.navigateTo({
                    url:'/pages/goods/goods?id=' + goods_id
                })
			},
            closeModal(){
                this.visibleModal = false;
                this.visibleModal1 = false;
            },
            /**
			 * 删除订单
             * @param status
             * @param msg
             */
            deleteRquest(){
                this.visibleModal1 = true;
            },
            async goDeleteRquest(isGo){
                if (isGo) {
                    await this.$api.MyRequest(order.DeleteOrder.url + this.orderInfo.id, order.DeleteOrder.method)
                        .then(res => {
                            uni.navigateTo({
                                url:'/pages/order/order_list?tbIndex=0'
                            })
                        })
                        .catch(err => {
                        })
                }
            },
            /**
			 * 修改订单状态
             * @param status
             * @param msg
             */
            goRequest(status, msg){
                this.visibleModal = true;
                this.modelContent = msg;
                this.requestData.status = status;
            },
			async goToRequest(isGo){
                if (isGo) {
                	await this.$api.MyRequest(order.PutOrder.url + this.orderInfo.id, order.PutOrder.method, this.requestData)
						.then(res => {
							this.orderInfo = res;
							this.$forceUpdate();
						})
						.catch(err => {
						})
                }
			},
            async loadData() {
                await this.$api.MyRequest(order.GetAnOrder.url + this.orderInfo.id, order.GetAnOrder.method)
                    .then(res => {
                        this.orderInfo = res
                        this.$forceUpdate();
                    })
                    .catch(err => {
                    })
            },
		}
	}
</script>

<style lang="scss">
	.uni-collapse::before{
		background: none;
	}
	.uni-collapse-cell::after{
		background: none;
	}
	.uni-collapse::after{
		background: none;
	}
	.uni-collapse-cell__content{
		height: auto!important;
	}
	.addr{
	width: 86%;
	padding: 20upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	display: flex;
	.icon{
		width: 80upx;
		height: 80upx;
		display: flex;
		align-items: center;
		image{
			width: 60upx;
			height: 60upx;
		}
	}
	.tel-name{
		width: 100%;
		display: flex;
		font-size: 32upx;
		.tel{
			margin-left: 40upx;
		}
	}
	.addres{
		width: 100%;
		font-size: 26upx;
		color: #999;
	}
	}
	.buy-list{
		width: 86%;
		padding: 10upx 3%;
		margin: 30upx auto 20upx auto;
		box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
		border-radius: 20upx;
		.row{
			margin: 30upx 0;
			.goods-info{
				width: 100%;
				display: flex;
				.img{
					width: 22vw;
					height: 22vw;
					border-radius: 10upx;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 10upx;
					image{
						width: 22vw;
						height: 22vw;
					}
				}
				.info{
					width: 100%;
					height: 22vw;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;
					position: relative;
					.title{
						width: 100%;
						font-size: 28upx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						// text-align: justify;
						overflow: hidden;
					}
					.spec{
						font-size: 22upx;
						background-color: #f3f3f3;
						color: #a7a7a7;
						height: 40upx;
						display: flex;
						align-items: center;
						padding: 0 10upx;
						border-radius: 20upx;
						margin-bottom: 20vw;
					}
					.price-number{
						position: absolute;
						width: 100%;
						bottom: 0upx;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;
						font-size: 28upx;
						height: 40upx;
						.price{
							color: #f06c7a;
						}
						.number{
							display: flex;
							justify-content: center;
							align-items: center;

						}
					}
				}
			}
		}
	}
	.order{
		width: 86%;
		padding: 10upx 3%;
		margin: 30upx auto 20upx auto;
		box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
		border-radius: 20upx;
		.row{
			margin: 20upx 0;
			height: 40upx;
			display: flex;
			.left{
				font-size: 28upx;
			}
			.right{
				margin-left: 40upx;
				font-size: 26upx;
				color: #999;
				input{
					font-size: 26upx;
					color: #999;
				}
			}
		}
	}
	.blck{
		width: 100%;
		height: 100upx;
	}
	.footer{
		width: 100%;
		padding: 0 10upx;
		background-color: #fbfbfb;
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 20upx;
		color: #ec652f;
		position: fixed;
		bottom: 0upx;
		z-index: 5;
		.settlement{
			width: 80%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 80upx;
			view{
				min-width: 120upx;
				height: 50upx;
				padding: 0 20upx;
				border-radius: 50upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28upx;
				margin-left: 20upx;
			}
			.default{
				border: solid 1upx #ccc;
				color: #666;
			}
			.pay{
				border: solid 1upx #ec652f;
				color: #ec652f;
			}
			.sum{
				width: 50%;
				font-size: 28upx;
				margin-right: 10upx;
				display: flex;
				justify-content: flex-end;
				.money{
					font-weight: 600;
				}
			}
		}
	}
	.detail{
	width: 86%;
	padding: 10upx 3%;
	margin: 30upx auto 20upx auto;
	box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1);
	border-radius: 20upx;
	.row{
		height: 60upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.nominal{
			font-size: 28upx;
		}
		.content{
			font-size: 26upx;
			color: #f06c7a;
		}
	}
}
</style>
